<template>
	<view class="">
		<u-navbar :is-back="false" :border-bottom="false" :background="{ background: '#fff' }">
			<view class="slot-wrap flex align-center">
				<text class="cuIcon-back" @click="Back"></text>
				个人资料
			</view>
		</u-navbar>
		<view class="main">
			<view class="cu-form-group">
				<view class="title">头像</view>
				<image class="u-avatar-demo" :src="avatar" mode="aspectFill" @tap="chooseAvatar"></image>
			</view>
			<view class="cu-form-group" @click="open">
				<view class="title">昵称</view>
				<view class="text-gray">
					胡工<text class="cuIcon-right u-font-32 "></text>
					<!-- {{vuex_user_name}} -->
				</view>
			</view>
			<view class="cu-form-group" @click="show = true">
				<view class="title">性别</view>
				<view class="text-gray">
					男<text class="cuIcon-right u-font-32 "></text>
					<!-- {{get_sex_name}} -->
				</view>
				
			</view>
			<view class="cu-form-group" @click="multiRedirect('/pages/my/autonym')">
				<view class="title">手机号</view>
				<view class="text-gray">
					<!-- {{vuex_user_phone||'未知'}}-->
				</view>
			</view>
			<view class="cu-form-group">
				<view class="title">ID号</view>
				<view class="text-gray">
					UIN48594859468
					<!-- {{join_time}} -->
				</view>
				 <!-- v-if="join_time" -->
			</view>	
		</view>
		<view class="flex justify-center">
			<view class="cu-btn bg-orange round">
				保存
			</view>
		</view>
		<u-select v-model="show" mode="single-column" :list="list" @confirm="confirm"></u-select>
		<u-modal v-model="shows" :show-cancel-button="true" confirm-color="#CC0001" title="修改昵称" @confirm="amend">
			<view class="slot-content">
				<input type="text" v-model="names" placeholder="请输入昵称" placeholder-class="u-font-26" class="u-font-26 text-center" />
			</view>
		</u-modal>
	</view>
</template>

<script>
	export default {
		data() {
			return {
                is_bind_wx:0,
				avatar: '../../static/images/avatar.png',
				
				show: false,
				shows: false,
				join_time:0,
				names:'',
				
				list: [
					{
						value: '1',
						label: '男'
					},
					{
						value: '2',
						label: '女'
					},
					{
						value: '3',
						label: '保密'
					}
				],
				
			}
		},
		created() {
					// 监听从裁剪页发布的事件，获得裁剪结果
					uni.$on('uAvatarCropper', path => {
						this.avatar = path;
						// 可以在此上传到服务端
						uni.uploadFile({
							url: 'http://www.example.com/upload',
							filePath: path,
							name: 'file',
							complete: (res) => {
								console.log(res);
							}
						});
					})
				},
        computed:{
        	get_sex_name(){
        		const user_sex = this.vuex_user_sex-0
                console.log("user_sex",user_sex)
        		let info = {}
        		for(let i=0;i<this.list.length;i++){
        			let item = this.list[i]
        			if(user_sex===(item['value']-0)){
        				info = item
        				break;
        			}
        		}
        		return info.label||''
        	},
        	get_bind_wx_name(){
        		return this.is_bind_wx-0 ? '解绑':'绑定' 
        	}
        },
        onLoad() {
            this.names = this.vuex_user_name
            this._initData()
        
        },
		methods: {
			Back(){
				uni.navigateBack({
				});
			},
            _initData(){
            	this.$u.http.post('/api/user/data',{
            		type:'personal',
            	}).then(({data})=>{
            		this.is_bind_wx = data.is_bind_wx||0
                    this.join_time = data.join_time||0
            	})
            },
            onKeyInputUserName(e){
            	const name = e
            	this.handleSave({
            		name:name
            	}).then(({msg})=>{
            		this.$u.vuex('vuex_user_name', name)
            	})
            },
            handleSave(params,fnc){
            	console.log(params)
            	return this.$u.http.post('/api/user/modInfo',params)
            },
			chooseAvatar() {
							// 此为uView的跳转方法，详见"文档-JS"部分，也可以用uni的uni.navigateTo
							this.$u.route({
								// 关于此路径，请见下方"注意事项"
								url: '/uview-ui/components/u-avatar-cropper/u-avatar-cropper',
								// 内部已设置以下默认参数值，可不传这些参数
								params: {
									// 输出图片宽度，高等于宽，单位px
									destWidth: 300,
									// 裁剪框宽度，高等于宽，单位px
									rectWidth: 200,
									// 输出的图片类型，如果'png'类型发现裁剪的图片太大，改成"jpg"即可
									fileType: 'jpg',
								}
							})
						},
			open() {
				this.shows = true;
			},
			// 注意返回值为一个数组，单列时取数组的第一个元素即可(只有一个元素)
			confirm(e) {
				console.log(e)
                var sex = 0
                e.forEach(function(item){
                    sex = item.value
                })
				console.log(sex)
                this.handleSave({
                	sex:sex
                }).then(({msg})=>{
                	this.$u.vuex('vuex_user_sex', sex)
                })
			},
			// 修改昵称
			amend(){
                const name = this.names
                this.handleSave({
                	name:name
                }).then(({msg})=>{
                	this.$u.vuex('vuex_user_name', name)
                })
			}
		}
	}
</script>

<style lang="scss">
	.main {
		margin: 30rpx;
		border-radius: 15rpx;
		background-color: #FFFFFF;
	}
	.cu-form-group{
		background-color: transparent;
	}

	.u-avatar-demo {
		width: 65rpx;
		height: 65rpx;
		border-radius: 100rpx;
	}
	.cuIcon-right{
		margin-left: 8rpx;
	}
	.slot-content{
		margin: 40rpx 0;
	}
	.cu-btn{
		margin: 190rpx auto;
		width: 527rpx;
		height: 82rpx;
		font-size: 32rpx;
	}
</style>
